<template>
  <div class="login">
    <nav>
      <van-nav-bar left-arrow @click-left="onClickLeft" />
    </nav>

    <main>
      <h1>注册</h1>

      <div class="log">
        <van-form @submit="onSubmit">
          <van-field
            v-model="ruleForm.username"
            name="username"
            label="用户名"
            placeholder="请设置用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="ruleForm.userphone"
            name="userphone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="telRules"
          />
          <van-field
            v-model="ruleForm.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请设置密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 30px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
      <router-link to="/login" class="reg">已有账号，去登录</router-link>
    </main>
  </div>
</template>

<script>
import { userReg } from "@/api/user";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        userphone: "",
        password: "",
      },

      telRules: [
        {
          required: true,
          message: "手机号码不能为空",
          trigger: "onBlur",
        },
        {
          // 自定义校验规则
          validator: (value) => {
            return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(
              value
            );
          },
          message: "请输入正确格式的手机号码",
          trigger: "onBlur",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit(values) {
      userReg(this.ruleForm).then((res) => {
        let { code } = res.data;
        if (code == 1) {
          setTimeout(() => {
            this.$router.push({
              path: "/login",
            });
          }, 3000);
        }
      });
    },
  },

  computed: {
    getData() {
      return this.$store.state.user.userInfo;
    },
  },
};
</script>

<style src="../assets/css/login.css" scoped>
</style>